<template>
	<view class="list">
		<view class="item" v-for="item in props.data" :key="item.id">
			<view class="left">
				<view class="img">
					<image :src="item.src" mode=""/>
				</view>
			</view>
			<view class="right">
				<view class="top">
					<text>{{ item.binding }}</text>
					<text style="color: #9a9a9a">{{ item.info }}</text>
				</view>
				<view class="bottom">
					<unitagVue v-if="item.status === 0" title="未绑定" :bgColor="backgroundColor3" :textColor="textColor3" />
					<text v-else-if="item.status === 1" style="color: #9a9a9a">{{ item.address }}</text>
				</view>
			</view>
		</view>
		<buttonVue :title="props.title" />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import unitagVue from '@/components/tag.vue';
import buttonVue from '@/components/button.vue';
const props = defineProps(['data', 'title']);
const backgroundColor3 = ref('#fde0e0');
const textColor3 = ref('#f5638b');
</script>

<style lang="scss">
.list {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #fff;
	overflow: auto;
	.item {
		height: 160rpx;
		display: flex;
		border: 2rpx solid #f2f2f2;
		border-radius: 10rpx;
		margin: 30rpx 0;
		.left {
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.img {
				width: 100rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width:70rpx;
					height:70rpx;
					border-radius:50%;
				}
			}
		}
		.right {
			width: calc(100% - 160rpx);
			display: flex;
			flex-direction: column;
			justify-content: center;
			.top {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.bottom {
				height: 80rpx;
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
